<template>
  <a-card>
    <a-space direction="vertical" fill>
      <a-row>
        <a-col>
          <a-button type="primary" @click="handleClick('add')">添加</a-button>
        </a-col>
      </a-row>
      <a-table :columns="columns" :data="data">
        <template #image="{ record }">
          <div class="list_image">
            <img
              v-if="record.image.includes('http://') || record.image.includes('https://')"
              :src="record.image"
              :alt="record.typeName"
            />
            <img v-else :src="baseUrl + '/' + record.image" :alt="record.typeName" />
          </div>
        </template>
        <template #handle="{ record }">
          <a-space>
            <a-link @click="handleClick('edit', record)">编辑</a-link>
            <a-link>删除</a-link>
          </a-space>
        </template>
      </a-table>
    </a-space>
  </a-card>
  <!-- 添加弹窗 -->
  <HandleForm
    ref="handleFormRef"
    :drawerInfo="drawerInfo"
    :formFields="formFields"
    :formConfig="formConfig"
    :rules="rules"
    @closeDrawer="drawerInfo.visible = false"
    @submitDrawer="submit"
  />
</template>

<script setup>
import { getCatetype, saveCatetype } from '@/api/shop.js'
import { ref, reactive } from 'vue'
import HandleForm from '@/components/HandleForm.vue'
import { saveBanner } from '@/api/other'
import { Message } from '@arco-design/web-vue'

const columns = [
  {
    title: '分类名称',
    dataIndex: 'typeName'
  },
  {
    title: '分类图片',
    dataIndex: 'image',
    slotName: 'image'
  },
  {
    title: '创建时间',
    dataIndex: 'create_time'
  },
  {
    title: '操作',
    slotName: 'handle'
  }
]
const baseUrl = import.meta.env.VITE_APP_FILE_PREVIEW_URL
const currentId = ref('')
const data = ref([])
//添加编辑抽屉相关配置
const drawerInfo = ref({
  width: 800,
  visible: false,
  title: '添加分类'
})
//表单字段相关配置
const initData = reactive([
  {
    type: 'input',
    prop: 'typeName',
    label: '分类名称',
    placeholder: '请输入分类名称',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'upload',
    prop: 'image',
    label: '上传分类图片',
    limit: 1,
    isShow: true,
    accept: 'image/png, image/jpeg',
    defaultValue: '',
    uploadConfig: {
      //   width: '100px',
      //   height: '100px',
      //   imageUrl: '',
      pictureCard: 'picture-card'
      //   data: {},
      //   accept: 'image/png,image/jpg,image/jpeg',
      //   multiple: false,
      //   limit: 1,
      //   name: 'url'
    }
  },
  {
    type: 'switch',
    prop: 'status',
    label: '是否启用',
    placeholder: '',
    active: 1,
    unActive: 0,
    isShow: true,
    defaultValue: 1
  }
])
const formFields = ref([])
//form相关配置
const formConfig = reactive({
  width: '100%'
})
//校验规则相关配置
const rules = reactive({
  typeName: [{ required: true, message: '分类名称不能为空' }]
})
const getList = async () => {
  const res = await getCatetype()
  if (res.code == 200) {
    data.value = res.data
  }
}
getList()

//操作
const handleClick = (type, item = null) => {
  currentId.value = ''
  formFields.value = JSON.parse(JSON.stringify(initData))
  if (type != 'delete') {
    if (type == 'add') {
      drawerInfo.value.title = '添加分类'
    } else {
      currentId.value = item.id
      drawerInfo.value.title = '编辑分类'
      formFields.value.map((field) => {
        for (const key in item) {
          if (field.prop == key) {
            field.defaultValue = item[key]
          }
        }
      })
    }
    drawerInfo.value.visible = true
  }
}

//提交
const submit = async (formObj) => {
  let res = await saveCatetype(formObj, currentId.value)
  if (res.code == 200) {
    drawerInfo.value.visible = false
    Message.success(currentId.value ? '编辑成功' : '添加成功')
    getList()
  }
}
</script>

<style lang="scss" scoped>
.list_image {
  width: 50px;
  height: 50px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
